<template>
    <div>
        <van-nav-bar
                :fixed="fixed"
                title="转入记录"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
        />
        <van-checkbox-group class="card-goods" v-model="checkedGoods">
                <van-card
                        v-for="item in goods"
                        :title="item.title"
                        :desc="item.desc"
                        :price="formatPrice(item.price)"
                        :thumb="item.thumb"
                />
        </van-checkbox-group>
        <van-submit-bar
                :price="totalPrice"
                :disabled="!checkedGoods.length"
                :button-text="submitBarText"
                @submit="onSubmit"
        />
    </div>
</template>

<script>
    import { Checkbox, CheckboxGroup, Card, SubmitBar, Toast } from 'vant';
    export default {
        components: {
            [Card.name]: Card,
            [Checkbox.name]: Checkbox,
            [SubmitBar.name]: SubmitBar,
            [CheckboxGroup.name]: CheckboxGroup
        },
        data() {
            return {
                fixed:true,
                checkedGoods: ['1', '2', '3'],
                goods: [{
                    id: '1',
                    title: '进口香蕉',
                    desc: '9月1日 11:20',
                    price: 200,
                    num: 1,
                    thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg'
                }, {
                    id: '2',
                    title: '陕西蜜梨',
                    desc: '9月1日 11:20',
                    price: 690,
                    num: 1,
                    thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/f6aabd6ac5521195e01e8e89ee9fc63f.jpeg'
                }, {
                    id: '3',
                    title: '美国伽力果',
                    desc: '9月1日 11:20',
                    price: 2680,
                    num: 1,
                    thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/320454216bbe9e25c7651e1fa51b31fd.jpeg'
                }]
            };
        },
        computed: {
            submitBarText() {
                const count = this.checkedGoods.length;
                return '共计：' + (count ? `(${count})` : '');
            },
            totalPrice() {
                return this.goods.reduce((total, item) => total + (this.checkedGoods.indexOf(item.id) !== -1 ? item.price : 0), 0);
            }
        },
        methods: {
            formatPrice(price) {
                return (price / 100).toFixed(2);
            },
            onSubmit() {
                Toast('点击结算');
            },
            onClickLeft(){
                this.$router.back()
            }
        }
    };
</script>
<style>
    .van-card__desc{
        margin-top: 10px;
    }
    .van-card{
        height: 70px;
        background-color: #ffffff;
        border-bottom: 1px solid #cccccc;
    }
   .van-card__thumb{
       width: 50px;
       height: 50px;
   }
    .van-card__thumb img{
        width: 50px;
        border-radius: 25px;
    }
</style>
<style scoped>
    .card-goods {
        margin-top: 46px;
        padding: 10px 0;
        background-color: #fff;
    }
</style>
